<template>
    <div class="home_wrap">
        <div class="left">
            <img src="@/assets/img/logo.png" alt="">
            <div class="pingtai">学生成绩管理平台</div>
        </div>

        <div class="right">
            <ul class="list">
                <li>常见问题</li>
                <li>安全中心</li>
                <li>客服热线</li>
                <li @click="goLogin">{{ info }}</li>
                <li @click="exit">退出</li>

               
            </ul>
        </div>

    </div>
</template>

<script>
export default {
    computed: {
        info() {
            return this.$store.state.user_name ? this.$store.state.user_name : "登录"
        },

    },
    methods:{
            exit(){
                localStorage.clear();
                sessionStorage.clear();
                window.open("about:blank","_self");
                window.close();
            },
            goLogin(){
                console.log("goLogin"); //目的是点击该按钮跳转到登录页面
                //用编程式路由导航进行跳转 push  replace  go  back  forward
                // this.$router.push({
                //     name:"login"
                // })

                // 情况一：当有用户名时，再点击该标签就不能跳转到登录页面，写跳转页面时就需要有判断条件  
                //判断条件为vuex 中的state的用户名的值
                //在组件当中通过 this.$store.state.user_name  来读取vuex 当中的state的值
                // if(!this.$store.state.user_name){
                //     this.$router.push({
                //         name:"login"
                //     })
                // }


                //情况二：当为登录状态时，点击跳转到登录界面   当有用户名时，点击用户名进入个人中心

                if(!this.$store.state.user_name){
                    this.$router.push({
                        name:"login"
                    });
                }else{
                    this.$router.push({
                        name:"personcenter"
                    })
                }

            }
        }

}
</script>

<style lang="scss" scoped>
.home_wrap {
    display: flex;
    justify-content: space-between;

    .left {
        display: flex;
        align-items: center;

        img {
            width: 100px;
            height: 100px;
        }

        .pingtai {
            font-size: 30px;
            font-weight: 700;
            display: flex;
            align-items: center;
            // line-height: 130px;
        }
    }


    .right {

        display: flex;
        align-items: flex-end;

        .list {
            display: flex;

            li {
                padding-right: 10px;
                padding-bottom: 10px;
            }
        }
    }
}
</style>